<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统管理 - 模型订阅系统</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🔧</text></svg>">
</head>
<body>
    <div class="container">
        <!-- 顶部导航 -->
        <header class="header">
            <div class="header-content">
                <div class="logo">
                    <h1>🔧 系统管理中心</h1>
                    <p>模型订阅系统 - 管理维护界面</p>
                </div>
                <div class="header-actions">
                    <div class="status-indicator" id="systemStatus">
                        <span class="status-dot"></span>
                        <span class="status-text">检查中...</span>
                    </div>
                    <button class="btn btn-secondary" id="refreshAllBtn">🔄 全部刷新</button>
                </div>
            </div>
        </header>

        <!-- 导航标签 -->
        <nav class="nav-tabs">
            <button class="nav-tab active" data-tab="dashboard">📊 仪表板</button>
            <button class="nav-tab" data-tab="models">📦 模型管理</button>
            <button class="nav-tab" data-tab="clients">📱 订阅管理</button>
            <button class="nav-tab" data-tab="model-status">📊 模型状态</button>
            <button class="nav-tab" data-tab="model-dispatch">🚀 模型分发</button>
            <button class="nav-tab" data-tab="notifications">📢 通知管理</button>
            <button class="nav-tab" data-tab="system">⚙️ 系统设置</button>
        </nav>

        <!-- 仪表板标签页 -->
        <div id="dashboard-tab" class="tab-content active">
            <div class="dashboard-grid">
                <!-- 服务状态卡片 -->
                <div class="card">
                    <div class="card-header">
                        <h3>🔄 服务状态</h3>
                        <button class="btn btn-sm" id="refreshServiceBtn">刷新</button>
                    </div>
                    <div class="card-body" id="serviceStatus">
                        <div class="loading">加载服务状态中...</div>
                    </div>
                </div>

                <!-- 统计信息卡片 -->
                <div class="card">
                    <div class="card-header">
                        <h3>📈 统计信息</h3>
                        <button class="btn btn-sm" id="refreshStatsBtn">刷新</button>
                    </div>
                    <div class="card-body" id="statisticsInfo">
                        <div class="loading">加载统计信息中...</div>
                    </div>
                </div>

                <!-- 系统指标卡片 -->
                <div class="card">
                    <div class="card-header">
                        <h3>⚡ 系统指标</h3>
                        <button class="btn btn-sm" id="refreshMetricsBtn">刷新</button>
                    </div>
                    <div class="card-body" id="systemMetrics">
                        <div class="loading">加载系统指标中...</div>
                    </div>
                </div>

                <!-- WebSocket状态卡片 -->
                <div class="card">
                    <div class="card-header">
                        <h3>🔗 WebSocket状态</h3>
                        <button class="btn btn-sm" id="refreshWebSocketBtn">刷新</button>
                    </div>
                    <div class="card-body" id="websocketStatus">
                        <div class="loading">加载WebSocket状态中...</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 模型管理标签页 -->
        <div id="models-tab" class="tab-content">
            <div class="section-header">
                <h2>📦 模型管理</h2>
                <div class="section-actions">
                    <button class="btn btn-primary" id="createModelBtn">➕ 添加模型</button>
                    <button class="btn btn-secondary" id="refreshModelsBtn">🔄 刷新</button>
                    <button class="btn btn-info" id="triggerDiscoveryBtn">🔍 触发发现</button>
                </div>
            </div>
            <div id="modelsList" class="data-list">
                <div class="loading">加载模型列表中...</div>
            </div>
        </div>

        <!-- 订阅管理标签页 - 已隐藏 -->
        <div id="subscriptions-tab" class="tab-content" style="display: none;">
            <div class="section-header">
                <h2>🔔 订阅管理</h2>
                <div class="section-actions">
                    <button class="btn btn-primary" id="createSubscriptionBtn">➕ 创建订阅</button>
                    <button class="btn btn-secondary" id="refreshSubscriptionsBtn">🔄 刷新</button>
                    <div class="dropdown">
                        <button class="btn btn-info dropdown-toggle" id="batchActionsBtn">📋 批量操作</button>
                        <div class="dropdown-menu" id="batchActionsMenu">
                            <button class="dropdown-item" onclick="batchPauseSubscriptions()">⏸️ 批量暂停</button>
                            <button class="dropdown-item" onclick="batchResumeSubscriptions()">▶️ 批量恢复</button>
                            <button class="dropdown-item" onclick="batchDeleteSubscriptions()">🗑️ 批量删除</button>
                            <button class="dropdown-item" onclick="batchCheckSubscriptions()">🔍 批量检查</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="batch-selection" id="batchSelection" style="display: none;">
                <div class="selection-info">
                    <span id="selectedCount">0</span> 个订阅已选择
                    <button class="btn btn-sm btn-secondary" onclick="selectAllSubscriptions()">全选</button>
                    <button class="btn btn-sm btn-secondary" onclick="clearSelection()">清空</button>
                </div>
            </div>
            <div id="subscriptionsList" class="data-list">
                <div class="loading">加载订阅列表中...</div>
            </div>
        </div>

        <!-- 服务器管理标签页 - 已隐藏 -->
        <div id="servers-tab" class="tab-content" style="display: none;">
            <div class="section-header">
                <h2>🖥️ 服务器管理</h2>
                <div class="section-actions">
                    <button class="btn btn-primary" id="createServerBtn">➕ 添加服务器</button>
                    <button class="btn btn-secondary" id="refreshServersBtn">🔄 刷新</button>
                </div>
            </div>
            <div id="serversList" class="data-list">
                <div class="loading">加载服务器列表中...</div>
            </div>
        </div>

        <!-- 客户端管理标签页 -->
        <div id="clients-tab" class="tab-content">
            <div class="section-header">
                <h2>📱 客户端管理</h2>
                <div class="section-actions">
                    <button class="btn btn-secondary" id="refreshClientsBtn" onclick="refreshClients()">🔄 刷新</button>
                </div>
            </div>
            <div id="clientsList" class="data-list">
                <div class="loading">加载客户端列表中...</div>
            </div>
        </div>

        <!-- 模型状态标签页 -->
        <div id="model-status-tab" class="tab-content">
            <div class="section-header">
                <h2>📊 模型状态监控</h2>
                <div class="section-actions">
                    <button class="btn btn-primary" id="refreshModelStatusBtn" onclick="refreshModelStatus()">🔄 刷新</button>
                    <button class="btn btn-info" id="exportModelStatusBtn" onclick="exportModelStatus()">📤 导出</button>
                    <div class="dropdown">
                        <button class="btn btn-secondary dropdown-toggle" id="filterModelStatusBtn">🔍 筛选</button>
                        <div class="dropdown-menu" id="filterModelStatusMenu">
                            <div class="dropdown-item">
                                <label>客户端ID:</label>
                                <input type="text" id="filterClientId" placeholder="输入客户端ID">
                            </div>
                            <div class="dropdown-item">
                                <label>模型类型:</label>
                                <select id="filterModelType">
                                    <option value="">全部</option>
                                    <option value="detection">目标检测</option>
                                    <option value="segmentation">实例分割</option>
                                    <option value="classification">图像分类</option>
                                    <option value="pose">姿态估计</option>
                                </select>
                            </div>
                            <div class="dropdown-item">
                                <label>状态:</label>
                                <select id="filterStatus">
                                    <option value="">全部</option>
                                    <option value="active">运行中</option>
                                    <option value="loaded">已加载</option>
                                    <option value="unloaded">未加载</option>
                                    <option value="error">错误</option>
                                </select>
                            </div>
                            <div class="dropdown-item">
                                <button class="btn btn-sm btn-primary" onclick="applyModelStatusFilter()">应用筛选</button>
                                <button class="btn btn-sm btn-secondary" onclick="clearModelStatusFilter()">清除筛选</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 模型状态统计 -->
            <div class="model-status-stats" id="modelStatusStats">
                <div class="loading">加载模型状态统计中...</div>
            </div>
            
            <!-- 模型状态列表 -->
            <div id="modelStatusList" class="data-list">
                <div class="loading">加载模型状态列表中...</div>
            </div>
        </div>

        <!-- 模型分发标签页 -->
        <div id="model-dispatch-tab" class="tab-content">
            <div class="section-header">
                <h2>🚀 模型分发</h2>
                <div class="section-actions">
                    <button class="btn btn-primary" id="dispatchModelBtn">🚀 分发模型</button>
                    <button class="btn btn-secondary" id="refreshDispatchBtn">🔄 刷新</button>
                    <button class="btn btn-info" id="refreshClientsBtn">📱 刷新客户端</button>
                </div>
            </div>
            
            <!-- 分发表单 -->
            <div class="dispatch-form-section">
                <div class="card">
                    <div class="card-header">
                        <h3>📤 分发新模型</h3>
                    </div>
                    <div class="card-body">
                        <form id="dispatchForm" class="form-grid">
                            <div class="form-group">
                                <label for="dispatchModelName">模型名称 *</label>
                                <input type="text" id="dispatchModelName" name="model_name" required 
                                       placeholder="例如: yolo11n.pt">
                            </div>
                            
                            <div class="form-group">
                                <label for="dispatchModelUrl">模型URL *</label>
                                <input type="url" id="dispatchModelUrl" name="model_url" required 
                                       placeholder="https://github.com/ultralytics/assets/releases/download/v8.2.0/yolo11n.pt">
                            </div>
                            
                            <div class="form-group">
                                <label for="dispatchModelType">模型类型</label>
                                <select id="dispatchModelType" name="model_type">
                                    <option value="detection">目标检测</option>
                                    <option value="segmentation">实例分割</option>
                                    <option value="classification">图像分类</option>
                                    <option value="pose">姿态估计</option>
                                </select>
                            </div>
                            
                            <div class="form-group">
                                <label for="dispatchVersion">版本</label>
                                <input type="text" id="dispatchVersion" name="version" value="1.0.0" 
                                       placeholder="1.0.0">
                            </div>
                            
                            <div class="form-group">
                                <label for="dispatchDescription">描述</label>
                                <textarea id="dispatchDescription" name="description" rows="2" 
                                          placeholder="模型描述信息"></textarea>
                            </div>
                            
                            <div class="form-group">
                                <label for="dispatchAuthor">作者</label>
                                <input type="text" id="dispatchAuthor" name="author" 
                                       placeholder="模型作者">
                            </div>
                            
                            <div class="form-group client-target-group">
                                <label for="dispatchTargetClients">目标客户端</label>
                                <div class="client-selection-container">
                                    <div class="client-selection-header">
                                        <label class="checkbox-label">
                                            <input type="checkbox" id="selectAllClients" checked>
                                            <span class="checkmark"></span>
                                            分发到所有在线客户端
                                        </label>
                                    </div>
                                    <div class="client-selection-list" id="dispatchTargetClients">
                                        <div class="loading">加载客户端列表中...</div>
                                    </div>
                                    <div class="client-selection-actions">
                                        <button type="submit" class="btn btn-primary">🚀 开始分发</button>
                                        <button type="reset" class="btn btn-secondary">🔄 重置</button>
                                    </div>
                                </div>
                                <small class="form-help">选择要分发到的客户端，默认分发到所有在线客户端</small>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            
            <!-- 分发状态列表 -->
            <div class="dispatch-status-section">
                <div class="card">
                    <div class="card-header">
                        <h3>📊 分发状态</h3>
                        <button class="btn btn-sm" id="refreshDispatchStatusBtn">刷新</button>
                    </div>
                    <div class="card-body" id="dispatchStatusList">
                        <div class="loading">加载分发状态中...</div>
                    </div>
                </div>
            </div>
            
            <!-- 可用客户端列表 -->
            <div class="available-clients-section">
                <div class="card">
                    <div class="card-header">
                        <h3>📱 可用客户端</h3>
                        <button class="btn btn-sm" id="refreshAvailableClientsBtn">刷新</button>
                    </div>
                    <div class="card-body" id="availableClientsList">
                        <div class="loading">加载可用客户端中...</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 通知管理标签页 -->
        <div id="notifications-tab" class="tab-content">
            <div class="section-header">
                <h2>📢 通知管理</h2>
                <div class="section-actions">
                    <button class="btn btn-primary" id="sendNotificationBtn">📤 发送通知</button>
                    <button class="btn btn-secondary" id="refreshNotificationsBtn">🔄 刷新</button>
                </div>
            </div>
            <div id="notificationsList" class="data-list">
                <div class="loading">加载通知历史中...</div>
            </div>
        </div>

        <!-- 系统设置标签页 -->
        <div id="system-tab" class="tab-content">
            <div class="section-header">
                <h2>⚙️ 系统设置</h2>
                <div class="section-actions">
                    <button class="btn btn-success" id="saveSettingsBtn">💾 保存设置</button>
                    <button class="btn btn-secondary" id="reloadSettingsBtn">🔄 重新加载</button>
                </div>
            </div>

            <!-- 系统监控区域 -->
            <div class="system-monitoring">
                <div class="monitoring-grid">
                    <!-- 系统健康状态卡片 -->
                    <div class="card">
                        <div class="card-header">
                            <h3>🏥 系统健康状态</h3>
                            <button class="btn btn-sm" id="checkHealthBtn">检查</button>
                        </div>
                        <div class="card-body" id="healthStatus">
                            <div class="loading">检查系统状态中...</div>
                        </div>
                    </div>

                    <!-- 最近活动卡片 -->
                    <div class="card">
                        <div class="card-header">
                            <h3>📝 最近活动</h3>
                            <button class="btn btn-sm" id="refreshActivityBtn">刷新</button>
                        </div>
                        <div class="card-body" id="recentActivity">
                            <div class="loading">加载最近活动中...</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 系统设置区域 -->
            <div class="system-settings-section">
                <h3>🔧 系统配置</h3>
                <div id="systemSettings" class="settings-form">
                    <div class="loading">加载系统设置中...</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 模态框容器 -->
    <div id="modalContainer">
        <!-- 创建订阅模态框 -->
        <div id="createSubscriptionModal" class="modal" data-modal="createSubscriptionModal">
            <div class="modal-dialog">
                <div class="modal-header">
                    <h3 class="modal-title">创建订阅</h3>
                    <button class="modal-close" data-modal-close="createSubscriptionModal">&times;</button>
                </div>
                <div class="modal-content"></div>
            </div>
        </div>

        <!-- 编辑订阅模态框 -->
        <div id="editSubscriptionModal" class="modal" data-modal="editSubscriptionModal">
            <div class="modal-dialog">
                <div class="modal-header">
                    <h3 class="modal-title">编辑订阅</h3>
                    <button class="modal-close" data-modal-close="editSubscriptionModal">&times;</button>
                </div>
                <div class="modal-content"></div>
            </div>
        </div>

        <!-- 创建服务器模态框 -->
        <div id="createServerModal" class="modal" data-modal="createServerModal">
            <div class="modal-dialog">
                <div class="modal-header">
                    <h3 class="modal-title">添加服务器</h3>
                    <button class="modal-close" data-modal-close="createServerModal">&times;</button>
                </div>
                <div class="modal-content"></div>
            </div>
        </div>

        <!-- 编辑服务器模态框 -->
        <div id="editServerModal" class="modal" data-modal="editServerModal">
            <div class="modal-dialog">
                <div class="modal-header">
                    <h3 class="modal-title">编辑服务器</h3>
                    <button class="modal-close" data-modal-close="editServerModal">&times;</button>
                </div>
                <div class="modal-content"></div>
            </div>
        </div>

        <!-- 发送通知模态框 -->
        <div id="sendNotificationModal" class="modal" data-modal="sendNotificationModal">
            <div class="modal-dialog">
                <div class="modal-header">
                    <h3 class="modal-title">发送通知</h3>
                    <button class="modal-close" data-modal-close="sendNotificationModal">&times;</button>
                </div>
                <div class="modal-content"></div>
            </div>
        </div>

        <!-- 查看通知详情模态框 -->
        <div id="viewNotificationModal" class="modal" data-modal="viewNotificationModal">
            <div class="modal-dialog">
                <div class="modal-header">
                    <h3 class="modal-title">通知详情</h3>
                    <button class="modal-close" data-modal-close="viewNotificationModal">&times;</button>
                </div>
                <div class="modal-content"></div>
            </div>
        </div>

        <!-- 创建模型模态框 -->
        <div id="createModelModal" class="modal" data-modal="createModelModal">
            <div class="modal-dialog">
                <div class="modal-header">
                    <h3 class="modal-title">添加模型</h3>
                    <button class="modal-close" data-modal-close="createModelModal">&times;</button>
                </div>
                <div class="modal-content"></div>
            </div>
        </div>

        <!-- 编辑模型模态框 -->
        <div id="editModelModal" class="modal" data-modal="editModelModal">
            <div class="modal-dialog">
                <div class="modal-header">
                    <h3 class="modal-title">编辑模型</h3>
                    <button class="modal-close" data-modal-close="editModelModal">&times;</button>
                </div>
                <div class="modal-content"></div>
            </div>
        </div>

        <!-- 查看模型详情模态框 -->
        <div id="viewModelModal" class="modal" data-modal="viewModelModal">
            <div class="modal-dialog">
                <div class="modal-header">
                    <h3 class="modal-title">模型详情</h3>
                    <button class="modal-close" data-modal-close="viewModelModal">&times;</button>
                </div>
                <div class="modal-content"></div>
            </div>
        </div>

        <!-- 查看客户端详情模态框 -->
        <div id="viewClientModal" class="modal" data-modal="viewClientModal">
            <div class="modal-dialog">
                <div class="modal-header">
                    <h3 class="modal-title">客户端详情</h3>
                    <button class="modal-close" data-modal-close="viewClientModal">&times;</button>
                </div>
                <div class="modal-content"></div>
            </div>
        </div>

        <!-- 查看模型状态详情模态框 -->
        <div id="viewModelStatusModal" class="modal" data-modal="viewModelStatusModal">
            <div class="modal-dialog">
                <div class="modal-header">
                    <h3 class="modal-title">模型状态详情</h3>
                    <button class="modal-close" data-modal-close="viewModelStatusModal">&times;</button>
                </div>
                <div class="modal-content"></div>
            </div>
        </div>
    </div>

    <!-- 通知容器 -->
    <div id="notificationContainer" class="notification-container"></div>

    <!-- 脚本文件 -->
    <script src="scripts.js"></script>
</body>
</html>
